<template name="login-box">
	<view class="model">
		<view class="modalDlg">
			<view class='windowRow'>
				<text class='userTitle'>短信验证码登录</text>
				<icon type="cancel" size="18" color="#aaa" @tap='cancel'></icon>
			</view>
			<input class="weui-input" placeholder="请输入手机号码" type="number" maxlength="16" v-model="phone"></input>
			<button class="weui-btn" type="primary" @tap='send' size="mini" :disabled="sendsmsDisable">发送验证码{{sendsmsDisable?'('+time2enableSend+')':''}}</button>
			<valid-code :maxlength="6" :isPwd="false" @finish="finishValidCode"></valid-code>
		</view>
	</view>
</template>

<script>
	import '../common/TCaptcha.js'
	import sys from '../common/sys.js'
	import ValidCode from './p-validCode/validCode.vue'
	import {User} from '../common/service.js'
	const USER = new User()
	export default {
		name:"login-box",
		components: {
			ValidCode
		},
		props: {

		},
		data() {
			return {
				phone:'',
				sendsmsDisable: false,
				time2enableSend: 60,
			};
		},
		methods: {
			send(){
				const self = this
				new TencentCaptcha('2033722227', function(captcha) {
					if(captcha.ret==0){
						// console.log(captcha)
						USER.getSms(self.phone, captcha)
						self.sendsmsDisable = true
						self.time2enableSend = 60
						let repeatRun = ()=>{
							self.time2enableSend--
							if(self.time2enableSend>1){
								setTimeout(repeatRun, 1000)
							}else{
								self.sendsmsDisable = false
							}
						}
						repeatRun()
					}
				}).show()
			},
			async finishValidCode(code) {
				if(await USER.login(this.phone, code)){
					console.log('login ok')
					sys.toast_done('登录成功')
					this.$emit('login', this.phone)
				}
			},
			
			cancel(){
				this.$emit('cancel')
			}
		}
	}
</script>

<style>
	.model {
		position: fixed;
		top: 0;
		background-color: rgba(255, 255, 255, 0.9);
		width: 100%;
		height: 100%;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		display: flex;
		z-index: 60;
	}
	
	.modalDlg {
		position: relative;
		box-sizing: border-box;
		box-shadow: 0 0 6px 0 #000000;
		background-color: rgba(255, 255, 255, 0.9);
		/* color: #fff; */
		padding: 1em;
		margin: auto;
		width: 250px;
		/* min-width: 20em; */
		/* max-width: 25em; */
		overflow: hidden;
		border-radius: 6px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.windowRow {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 2ex;
		width: 100%;
		align-items: center;
		/* margin: 30rpx; */
		/* color: #aaa; */
		/* box-sizing: border-box; */
		padding: 0 10px;
	}

	.weui-input {
		border: 1px solid #ccc;
		margin: 13px 5px;
		/* width: 100%; */
		padding: 4px;
		border-radius: 4px;
		/* box-sizing: border-box; */
	}

	.weui-btn {
		margin-bottom: 40rpx;
	}

	.wishName {
		width: 100%;
		justify-content: center;
		flex-direction: row;
		display: flex;
		
	}

	.wish_put {
		width: 80%;
		border: 1px solid #666;
		border-radius: 4px;
		padding-left: 10rpx;
		caret-color: #666;
		/* color: #aaa; */
	}

	.wishbnt {
		width: 100%;
		/* font-size: 30rpx; */
		/* margin-bottom: 30rpx; */
		display: flex;
		justify-content: space-between;
	}

	.wishbnt_bt {
		width: 50%;
		background-color: #2d3132;
		color: #aaa;
		font-size: 30rpx;
		border: 1px solid #2d3132;
		border-top-color: #666;
		text-align: center;
		padding: 15rpx 0;
	}
</style>
